<script  src="./javascripts/jQuery.js"></script>
<div class="head">
    <p class="head_foot">在线选购，尊享免费配送。</p>
    <button class="close iconfont icon-guanbi-01"></button>
</div>
<div class="drop-down">
    <div class="drop-down-top">
        <div class="drop-down-lef">
            <a href="./index.html"><p class="p1 iconfont icon-fangdajing"></p></a>
            <a href="./index.html"><p class="p2 iconfont icon-dizhi-01"></p></a>
            <a href="./index.html"><p class="p3"><img src="./img/1.png" alt=""></p></a>
            <a href="./index.html"><p class="p4">客户服务中心</p></a>
        </div>
        <p class="p5"><a href="./index.html"><img src="./img/2.png" alt=""></a></p>
        <div class="drop-down-rig">
            <div class="xia_la">
                <p class="p6 iconfont icon-icongerenzhongxin-01"></p>
                <p class="p7">我的账户</p>
                <p class="p8 iconfont icon-shoucang1"></p>
                <p class="p9 iconfont icon-gongzuojilu"></p>
                <div class="xia_la_one">
                    <p class="p1">登录或创建账户</p>
                    <p class="p2">为您加快结算流程，便于查看订单历史及购物袋，以及管理电子发票</p>
                    <p class="p3"><a href="./login.html">注册新账户 &gt;</a></p>
                    <p class="p4"><a href="./enter.html">登录 &gt;</a></p>
                </div>
                <div class="xia_la_two">
                    <div class="shang">
                        <!-- <div class="shang_one">
                            <div class="xia_la_top">
                                <div class="xia_top_lef"><img src="https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/reader-tote-tiffany-t-67467787_1000482_ED.jpg?hei=384&wid=384" alt=""></div>
                                <div class="xia_top_rig">
                                    <div class="tit">项链项链项链项链项链项链项链项链项链项链项链项链项链项链</div>
                                    <div class="pri">￥2200</div>
                                    <div class="shu">数量 1</div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <div class="xia_la_bot">
                        <div class="xia_bot_lef">总额￥1351351</div>
                        <div class="xia_bot_rig">结账</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="dao_hang">
        <li class="li_one">珠宝系列
            <div class="two_dao_one">
                <div class="dao_one_cen">
                    <ul>
                        <li><h3>按类别选购</h3></li>
                        <li><a href="./torque.html">项链及吊坠</a> </li>
                        <li><a href="./torque.html">手链</a></li>
                        <li><a href="./torque.html">耳环</a></li>
                        <li><a href="./torque.html">戒指</a></li>
                        <li><a href="./torque.html">吊饰</a></li>
                        <li><h3><a href="./torque.html">选购所有珠宝&gt;</h3></a></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">按材质选购</a></h3></li>
                        <li><a href="./torque.html">金质珠宝</a></li>
                        <li><a href="./torque.html">18k 玫瑰金珠宝</a></li>
                        <li><a href="./torque.html">铂金珠宝</a></li>
                        <li><a href="./torque.html">纯银珠宝</a></li>
                        <li><h3><a href="./torque.html">按材质选购</h3></a></li>
                        <li><a href="./torque.html">钻石珠宝</a></li>
                        <li><a href="./torque.html">珍珠饰品</a></li>
                        <li><a href="./torque.html">绿松石珠宝</a></li>
                        <li><a href="./torque.html">海蓝宝石珠宝</a></li>
                        <li><a href="./torque.html">彩色宝石珠宝</a></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">选购推荐</a></h3></li>
                        <li><a href="./torque.html">全新作品</a></li>
                        <li><a href="./torque.html">高级珠宝</a></li>
                        <li><a href="./torque.html">热门甄选</a></li>
                        <li><a href="./torque.html">精致珠宝</a></li>
                        <li><a href="./torque.html">链式珠宝</a></li>
                        <li><a href="./torque.html">网球手链</a></li>
                        <li><a href="./torque.html">耳钉</a></li>
                        <li><a href="./torque.html">圈型耳环</a></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">按系列选购</a></h3></li>
                        <li><a href="./torque.html">Tiffany T系列</a></li>
                        <li><a href="./torque.html">Tiffany Victoria™ 系列</a></li>
                        <li><a href="./torque.html">Tiffany HardWear 系列</a></li>
                        <li><a href="./torque.html">Return to Tiffany™ 系列</a></li>
                        <li><a href="./torque.html">Tiffany Keys 系列</a></li>
                        <li><a href="./torque.html">Tiffany Atlas 系列</a></li>
                        <li><a href="./torque.html">Elsa PerettiR &reg; 系列</a></li>
                        <li><a href="./torque.html">Paloma Picasso &reg; 系列</a></li>
                        <li><a href="./torque.html">Tiffany & Co. Schlumberger 系列</a></li>
                        <li><h3><a href="./torque.html">选购所有系列&gt;</a></h3></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_two">挚爱订婚系列
            <div class="two_dao_two">
                <div class="dao_two_cen">
                    <ul>
                        <li><h3><a href="./torque.html">钻戒作品</a></h3></li>
                        <li><a href="./torque.html">订婚钻戒</a></li>
                        <li><a href="./torque.html">蒂芙尼钻石指南</a></li>
                        <li><a href="./torque.html">终身服务</a></li>
                        <li><a href="./torque.html">蒂芙尼钻石之旅</a></li>
                        <li><a href="./torque.html">咨询钻石专家</a></li>
                        <li><h3><a href="./torque.html">浏览挚爱订婚系列&gt;</a></h3></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">结婚作品</a></h3></li>
                        <li><a href="./torque.html">男士婚戒</a></li>
                        <li><a href="./torque.html">女士婚戒</a></li>
                        <li><a href="./torque.html">婚介与对戒</a></li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img src="//media.tiffany.cn/is/image/tiffanydm/brilliant diamonds_flyoutasset_cn?$tile$&wid=1168&hei=608" alt=""></li>
                        <li>Tiffany True</li>
                        <li><a href="./torque.html">浏览此系列 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_thr">腕表
            <div class="two_dao_thr">
                <div class="dao_two_cen">
                    <ul>
                        <li><h3><a href="./torque.html">按类别浏览</a></h3></li>
                        <li><a href="./torque.html">男士腕表</a></li>
                        <li><a href="./torque.html">女士腕表</a></li>
                        <li><a href="./torque.html">腕表</a></li>
                        <li><a href="./torque.html">浏览所有腕表</a></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">经典设计系列</a></h3></li>
                        <li><a href="./torque.html">Tiffany Metro 系列腕表</a></li>
                        <li><a href="./torque.html">Tiffany 1837 Makers 系列腕表</a></li>
                        <li><a href="./torque.html">Tiffany CT60&reg; 系列腕表</a></li>
                        <li><a href="./torque.html">Tiffany East West&reg; 系列腕表</a></li>
                        <li><a href="./torque.html">Atlas&reg; 腕表</a></li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img src="//media.tiffany.cn/is/image/tiffanydm/T_LE_Watches_Flyout-Desktop?$tile$&wid=1168&hei=608" alt=""></li>
                        <li>时刻摩登</li>
                        <li><a href="./torque.html">选购Tiffany T 系列腕表 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_fou">居家精品系列
            <div class="two_dao_fou">
                <div class="dao_two_cen">
                    <ul>
                        <li><h3><a href="./torque.html">按类别选购</a></h3></li>
                        <li><a href="./torque.html">餐具和酒具</a></li>
                        <li><a href="./torque.html">书桌配饰</a></li>
                        <li><a href="./torque.html">家具用品</a></li>
                        <li><a href="./torque.html">游戏与创新小物</a></li>
                        <li><a href="./torque.html">婴儿</a></li>
                        <li><h3><a href="./torque.html">选购所有居家精品系列&gt;</a></h3></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">配饰</a></h3></li>
                        <li><a href="./torque.html">男士配饰</a></li>
                        <li><a href="./torque.html">女士配饰</a></li>
                        <li><a href="./torque.html">皮具</a></li>
                        <li><a href="./torque.html">眼镜</a></li>
                        <li><a href="./torque.html">钥匙扣</a></li>
                        <li><a href="./torque.html">宠物配饰</a></li>
                        <li><h3><a href="./torque.html">选购所有居家精品系列&gt;</a></h3></li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img src="//media.tiffany.cn/is/image/tiffanydm/Leather_Nav_Flyout?$tile$&wid=1168&hei=608" alt=""></li>
                        <li>奢华皮具</li>
                        <li><a href="./torque.html">即刻选购 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_fiv">香水
            <div class="two_dao_fiv">
                <div class="dao_two_cen">
                    <ul>
                        <li>
                            <h3><a href="./torque.html">按系列选购</a></h3>
                        </li>
                        <li><a href="./torque.html">Tiffany Eau de Parfum</a></li>
                        <li><a href="./torque.html">Tiffany & Love</a></li>
                        <li>
                            <h3><a href="./torque.html">选购所有香水&gt;</a></h3>
                        </li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img
                                src="//media.tiffany.cn/is/image/tiffanydm/Fragrance_NavFlyout_3Column_1760x608_V2?$tile$&wid=1760&hei=608"
                                alt=""></li>
                        <li>找到适合您的香水</li>
                        <li><a href="./torque.html">即刻选购 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_six">男士系列
            <div class="two_dao_six">
                <div class="dao_two_cen">
                    <ul>
                        <li><h3><a href="./torque.html">按类别浏览</a></h3></li>
                        <li><a href="./torque.html">项链和吊坠</a></li>
                        <li><a href="./torque.html">手链</a></li>
                        <li><a href="./torque.html">戒指</a></li>
                        <li><a href="./torque.html">配饰</a></li>
                        <li><a href="./torque.html">腕表</a></li>
                        <li><a href="./torque.html">酒具</a></li>
                        <li><a href="./torque.html">游戏与创新小物</a></li>
                        <li><h3><a href="./torque.html">浏览全部男士系列&gt</a></h3></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">按系列</a></h3></li>
                        <li><a href="./torque.html">Tiffany T系列</a></li>
                        <li><a href="./torque.html">Tiffany 1837™ Makers 系列</a></li>
                        <li><a href="./torque.html">Diamond Point 系列</a></li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img src="//media.tiffany.cn/is/image/tiffanydm/Mens_NavFlyout_2Column_1168x608_CN?$tile$&wid=1168&hei=608" alt=""></li>
                        <li>Tiffany T男士系列</li>
                        <li><a href="./torque.html">立即选购 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="li_sev">礼品
            <div class="two_dao_sev">
                <div class="dao_two_cen">
                    <ul>
                        <li><h3><a href="./torque.html">选购礼品</a></h3></li>
                        <li><a href="./torque.html">父亲节臻礼</a></li>
                        <li><a href="./torque.html">毕业生臻礼</a></li>
                        <li><a href="./torque.html">女士</a></li>
                        <li><a href="./torque.html">男士</a></li>
                        <li><a href="./torque.html">婴儿</a></li>
                        <li><a href="./torque.html">情侣</a></li>
                        <li><a href="./torque.html">居家好礼</a></li>
                        <li><a href="./torque.html">周年纪念臻礼</a></li>
                        <li><a href="./torque.html">生日臻礼</a></li>
                        <li><h3><a href="./torque.html">选购全部礼品&gt</a></h3></li>
                    </ul>
                    <ul>
                        <li><h3><a href="./torque.html">选购推荐</a></h3></li>
                        <li><a href="./torque.html">钟爱之选</a></li>
                        <li><a href="./torque.html">可镌刻礼品和个性化礼品创意</a></li>
                        <li><a href="./torque.html">Tiffany Blue&reg; 蒂芙尼蓝色臻礼</a></li>
                        <li><a href="./torque.html">Elsa Peretti&reg; 家具系列</a></li>
                        <li><a href="./torque.html">香水</a></li>
                    </ul>
                    <ul class="show">
                        <li class="tu"><img src="//media.tiffany.cn/is/image/tiffanydm/FathersDay_GiftsLP_Flyout-1?$tile$&wid=1168&hei=608" alt=""></li>
                        <li>送给父亲节的贴心好礼</li>
                        <li><a href="./torque.html">选购父亲节好礼 &gt;</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
<script>
    var user_one = document.querySelector(".xia_la .p6")
    var user_two = document.querySelector(".xia_la .p7")
    var user_thr = document.querySelector(".xia_la .p8")
    var user_fou = document.querySelector(".xia_la .p9")
    var interface = document.querySelector(".xia_la")
    var xia_one = document.querySelector(".xia_la .xia_la_one")
    var xia_two = document.querySelector(".xia_la .xia_la_two")
    var t = null
    user_one.onmouseover = function(){
        xia_two.style.display = "none";
        xia_one.style.display = "none";
        interface.style.height = 60 + "px";
        t = setTimeout(function () {
            xia_one.style.display = "block";
        }, 500)
    }
    user_two.onmouseover = function(){
        xia_two.style.display = "none";
        xia_one.style.display = "none";
        interface.style.height = 60 + "px";
        setTimeout(function () {
            xia_one.style.display = "block";
        }, 500)
    }
    user_thr.onmouseover = function(){
        xia_two.style.display = "none";
        xia_one.style.display = "none";
        interface.style.height = 60 + "px";
        setTimeout(function () {
            xia_one.style.display = "block";
        }, 500)
    }
    user_fou.onmouseover = function(){
        xia_one.style.display = "none";
        interface.style.height = 60 + "px";
        setTimeout(function () {
            xia_two.style.display = "block";
        }, 500)
    }
    interface.onmouseleave = function(){
        clearTimeout( t )
        xia_one.style.display = "none";
        xia_two.style.display = "none";
        interface.style.height = 0 + "px";
    }
    $( function(){
            var cart = (function(){
                        if( localStorage.getItem("cart")){
                              var data = null;
                              try{
                                    data =  JSON.parse( localStorage.getItem("cart") );

                              }catch(e){
                                    data = {};
                              }

                              return data;
                        } else{
                              return {};
                        }
                  })();
            // 根据cart的数据渲染页面; 
                  
            var html = "";

            // 拼接html结构 : 
            for(var attr in cart){
                  html += `<div class="shang_one">
                            <div class="xia_la_top">
                                <div class="xia_top_lef"><img src="${ cart[attr].image }" alt=""></div>
                                <div class="xia_top_rig">
                                    <div class="tit">${  cart[attr].title }</div>
                                    <div class="pri">￥${ cart[attr].price }</div>
                                    <div class="shu">数量 ${ cart[attr].count }</div>
                                </div>
                            </div>
                        </div>`
            }


            $(".shang").append(
                  html
            );

      })
</script>